<template>
  <page-frame bg="#fff" pageRouter="login">
    <div style="display: flex" class="Pc">
      <div style="flex: 1; position: relative">
        <img
            src="@/assets/images/banner.png"
            alt=""
            width="100%"
            height="100%"
            style="
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            z-index: 1;
          "
        />
      </div>
      <div style="flex: 1">
        <div class="login-body">
          <div class="login-container">
            <div class="head">
              <div class="name">
                <div class="title">Login to your account</div>
              </div>
            </div>
            <el-form
                label-position="top"
                :model="ruleForm"
                ref="loginForm"
                class="login-form"
            >
              <el-form-item class="account">
                <div
                    style="
                    font-size: 16px;
                    color: #333;
                    line-height: 24px;
                    margin-bottom: 4px;
                  "
                >
                  E-mail
                </div>
                <input
                    type="text"
                    v-model.trim="ruleForm.account"
                    autocomplete="off"
                />
              </el-form-item>
              <el-form-item class="password">
                <div
                    style="
                    font-size: 16px;
                    color: #333;
                    line-height: 24px;
                    margin-bottom: 4px;
                  "
                >
                  Password
                </div>
                <input
                    type="password"
                    v-model.trim="ruleForm.password"
                    autocomplete="off"
                />
              </el-form-item>
              <el-form-item class="btn">
                <div
                    style="
                    text-align: center;
                    font-size: 16px;
                    color: #333;
                    line-height: 24px;
                    text-decoration: underline;
                    margin-bottom: 5px;
                    cursor: pointer;
                  "
                    @click="retrievePassword"
                >
                  Forgot Password?
                </div>
                <div
                    style="
                    text-align: center;
                    font-size: 16px;
                    color: #333;
                    line-height: 24px;
                    margin-bottom: 30px;
                  "
                >
                  Don't have an account?
                  <span
                      style="
                      text-decoration: underline;
                      color: #0e9666;
                      cursor: pointer;
                    "
                      @click="joinNow"
                  >
                    Join now
                  </span>
                </div>
                <el-button
                    style="
                    width: 100%;
                    background-color: #0e9666;
                    height: 40px;
                    line-height: 40px;
                    padding: 0;
                    font-size: 14px;
                  "
                    @click="submitForm"
                    class="submit"
                >
                  登录
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="Mobile">
      <div class="contain">
        <div style="font-size: 21px;font-weight: bold;text-align: center;margin:60px 0 35px;">登录到您的账户</div>
        <div style="padding: 0 35px;">
          <div class="account">
            <div
                style="
                    font-size: 14px;
                    color: #fff;
                    line-height: 20px;
                    margin-bottom: 12px;
                  "
            >
              邮箱
            </div>
            <input
                type="text"
                v-model.trim="ruleForm.account"
                autocomplete="off"
                style="background: #fff;border-radius: 20px;border:0!important;height: 40px"
            />
          </div>
          <div class="account" style="margin-top: 20px;position: relative">
            <div
                style="
                    font-size: 14px;
                    color: #fff;
                    line-height: 20px;
                    margin-bottom: 12px;
                  "
            >
              密码
            </div>
            <input
                :type="isPassword ? 'password' : 'text'"
                v-model.trim="ruleForm.password"
                autocomplete="off"
                style="background: #fff;border-radius: 20px;border:0!important;height: 40px"
            />
            <img
                src="@/assets/icons/svg/eye.svg"
                alt=""
                width="20"
                height="20"
                style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                @click="isPassword = !isPassword"
                v-if="isPassword"
            />
            <img
                src="@/assets/icons/svg/eye-no.svg"
                alt=""
                width="20"
                height="20"
                style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                @click="isPassword = !isPassword"
                v-if="!isPassword"
            />
          </div>
        </div>
        <div style="position: fixed;bottom: 0;left: 0;width: 100%;padding: 0 35px 20px;">
          <div style="text-align: center;font-size: 15px">
            <span style="cursor:pointer;" @click="joinNow">立即注册</span>
            <span> | </span>
            <span style="cursor:pointer;" @click="retrievePassword">忘记密码</span>
          </div>
          <div
              style="width: 100%;height: 40px;line-height: 40px;text-align: center;background: #0e9666;border-radius: 20px;font-size: 14px;color: #fff;cursor: pointer;margin-top: 20px;"
              @click="submitForm">登录
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
import {reactive, ref, toRefs, getCurrentInstance} from "vue";

export default {
  name: "Login",
  setup() {
    /* 全局挂载utils工具类 start */
    const {proxy} = getCurrentInstance();
    const {$api, $common, $validate, $router, $elUtils, $tokenUtils} =
        proxy;

    /* 全局挂载 end */

    const loginForm = ref(null);
    const state = reactive({
      ruleForm: {
        account: "",
        password: "",
      },
      checked: true,
      isPassword: true
    });
    const submitForm = async () => {
      if (
          $validate.isNull(state.ruleForm.account) ||
          !$validate.isEmail(state.ruleForm.account)
      ) {
        $elUtils.warnMsg("E-Mail is not correct, please check.");
        return;
      }

      var pattern =
          /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,20}$/;
      //||!pattern.test(state.ruleForm.password)
      if ($validate.isNull(state.ruleForm.password)) {
        $elUtils.warnMsg("password can not be blank");
        return;
      }
      const paramObj = {
        account: state.ruleForm.account,
        password: state.ruleForm.password,
      };
      $api
          .userLogin(paramObj)
          .then((res) => {
            if (res.code == 1) {
              $tokenUtils.setToken(res.data.userinfo.token);
              $common.setKeyVal("system", "userInfo", res.data.userinfo, true);
              $common.setKeyVal("system", "isLogin", true, true);
              $router.push({name: "GuessingCompetitionIndex"});
              $elUtils.successMsg("Login Success!!");
            } else {
              $elUtils.errorMsg(res.message);
            }
          })
          .catch((err) => {
            $elUtils.errorMsg(err.message);
          });
    };
    const joinNow = () => {
      $router.push({name: "Register"});
    };

    const retrievePassword = () => {
      $router.push({name: "RetrievePassword"});
    };
    return {
      ...toRefs(state),
      loginForm,
      submitForm,
      joinNow,
      retrievePassword,
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/assets/styles/index.scss";

input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding-left: 10px;
  font-size: 16px;
  color: #333333;
  background: #eee;
  border: 0;
}

input:focus,
input:focus-visible {
  background-color: rgb(255, 255, 255) !important;
  border: 2px solid rgb(33, 138, 251) !important;
}

.input__inner {
  width: 100%;
  border: 0 !important;
  background: #eee !important;
}

.login-body {
  display: flex;
  /*x轴对齐*/
  justify-content: center;
  /*y轴对齐*/
  align-items: center;
  height: calc(100vh - 70px);
  width: 100%;
  background-color: #fff;
  //padding-top: 180px;
  .login-container {
    width: 500px;
    height: 380px;
    background-color: #fff;
    border-radius: 4px;

    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0;

      .title {
        font-size: 24px;
        color: #333333;
        font-weight: bold;
      }
    }

    .login-form {
      width: 90%;
      margin: 0 auto;

      .account {
      }

      .password {
        margin: 20px 0;
      }

      .btn {
        .submit {
          background-color: rgba(255, 45, 137, 1);
          color: #ffffff;
          padding: 14px 20px;
          font-size: 16px;
        }
      }
    }
  }
}

.Mobile {
  height: 94vh;

  .contain {
    color: #fff;
    font-size: 14px;
  }

  input:focus,
  input:focus-visible {
    background-color: rgb(255, 255, 255) !important;
    border: 0 !important;
  }
}
</style>
